<template>
  <div style="width: 100%;height: 100%;">
    <el-row :gutter="10" style="width: 100%;height: 60%">
      <!--   调用video截图   -->
      <el-col :span="12">
        <div class="box">
          <el-image :src="img" :fit="'cover'" style="height: 90%;margin-left: 13%;margin-top: 3%"/>
        </div>
        <el-button type="primary" plain
                   style="margin-left: 40%;margin-top: 2%"
                   @click="startDetect"
        >
          开始人脸检测
        </el-button>
      </el-col>
      <!--   上传的图片   -->
      <el-col :span="12">
        <div class="box">
          <el-image :src="ImgSrc" :fit="'cover'" style="width: auto;height: 90%;margin-left: 30%;margin-top: 3%"/>
        </div>
<!--        <el-button type="primary" plain class="botton_start" @click="uploadImg">上传图片</el-button>-->
        <el-upload ref="uploadRef" class="upload-demo botton_start" :on-error="uploadImg">
          <template #trigger>
            <el-button type="primary">上传图片</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 2MB
            </div>
          </template>
        </el-upload>
      </el-col>
    </el-row>

    <el-button type="primary" plain class="botton_start ty" @click="FaceBattle">开始对比</el-button>

    <el-dialog v-model="show" title="Warning" width="30%" center>
      <span>
        误识率：{{ msg }}
      </span>
      <span>
        结果：同一个人概率极大
      </span>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">查看完毕</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {FaceBattleFlask, faceImgFlask, faceVideo, getQiniuToken} from "@/api/Second";
import {UploadFilled} from "@element-plus/icons-vue";
import * as qiniu from "qiniu-js";

let ImgSrc = ref("")
let Img = ref("http://qiniuyun.linter.top/outher_01.jpg")
let faceImg = ref("http://qiniuyun.linter.top/frame_01")
let img = ref("")
const randomNum = Math.random();

// 用户上传的文件路径
const file = ref(null)

// 人脸对比
let show = ref(false)
let msg = ref("")
// 开始人脸检测
function startDetect() {
  ElMessage({message: "开始人脸检测", type: "success"})
  faceVideo().then((res) => {
    ElMessage({message: "调用video完成", type: "success"})
    img.value = `${faceImg.value}?v=${randomNum}`;
    let msg = faceImg.value
    faceImgFlask(msg).then((res)=>{
      let num = res.data.message
      ElMessage({message: "识别人数为:"+num, type: "success"})
    })
  })
}

// 上传图像到qiniu
function uploadImg() {
  ElMessage({message: "开始上传", type: "success"})
  let access_key = 'CKAWgGNUtJB1TFofmKtQ9nqfvqDS6lQdKkAiHh04'
  let secret_key = 'ttBa1dX8s9aoYbzqjGf6Sn63ErZYikWo1ELHsbuQ'
  let bucket_name = 'linter-beiyu'
  let key = "outher_01"

  getQiniuToken().then((res)=>{
    let token = res.data.message
    // const observable = qiniu.upload(file, key, token)
    // const subscription = observable.subscribe()
    // subscription.unsubscribe() // 上传取消
    ImgSrc.value = `${Img.value}?v=${randomNum}`;
  })
}

// 人脸对比
function FaceBattle() {
  ElMessage({message: "开始对比", type: "success"})
  FaceBattleFlask().then((res) => {
    console.log(res.data.message)
    msg.value = {"1e-3": 65.3, "1e-5": 76.5, "1e-4": 71.8}
    show.value = true
    ElMessage({message: "对比完成", type: "success"})
  })
}
</script>

<style scoped>
.box{
  border: 1px solid dodgerblue;
  height: 80%;
  background-color: #dddddd;
  border-radius: 2%;
}
.botton_start{
  margin-left: 45%;
  margin-top: 2%
}
.ty{
  margin-top: 10%;
}
</style>
